<template>
  <view class="record-detail-page">
    <TopBar
      left-icon="/static/user.png"
      scan-icon="/static/saoyisao.png"
      menu-icon="/static/menu.png"
      @menu="toggleMenu"
    />

    <scroll-view scroll-y class="form-scroll">
      <!-- 返回箭头 -->
      <view class="back-row" @click="goBack">
        <image
          class="back-arrow-icon"
          src="/static/left.png"
          mode="aspectFit"
        />
      </view>

      <view class="title-wrap">
        <text class="page-title">Vaglette</text>
      </view>

      <!-- 搜索框 -->
      <view class="search-box">
        <image src="/static/search.png" class="search-icon" />
        <input class="search-input" placeholder="Value" />
      </view>

      <!-- 选项卡 -->
      <view class="tabs">
        <view
          class="tab"
          :class="{ active: active === 'date' }"
          @click="active = 'date'"
          >DATE</view
        >
        <view
          class="tab"
          :class="{ active: active === 'score' }"
          @click="active = 'score'"
          >SCORE</view
        >
      </view>

      <!-- 列表（仅DATE下显示） -->
        <view
          v-if="active === 'date'"
          style="margin-top: -12px; z-index: 99; position: relative"
        >
          <view class="dir-item" v-for="(it, i) in items" :key="i" @click="goType">
          <image src="/static/record/dir.png" class="dir-icon" />
          <text class="dir-name">{{ it.code }}</text>
          <text class="dir-date">{{ it.date }}</text>
        </view>
      </view>
    </scroll-view>

    <CustomTabbar active="record" />

    <AccountMenu
      v-if="showMenu"
      :style="{ '--anchor-top': '70px', '--anchor-right': '16px' }"
      @close="closeMenu"
      @select="closeMenu"
    />
  </view>
</template>

<script setup>
import { ref } from "vue";
import TopBar from "@/components/TopBar.vue";
import AccountMenu from "@/components/AccountMenu.vue";
import CustomTabbar from "@/components/CustomTabbar.vue";

const showMenu = ref(false);
const toggleMenu = () => {
  showMenu.value = !showMenu.value;
};
const closeMenu = () => {
  showMenu.value = false;
};
const goBack = () => {
	uni.navigateTo({ url: '/pages/record/record' });
};

const active = ref("date");
const items = ref([
  { code: "VA7585241", date: "23/09/2025" },
  { code: "VA7585324", date: "14/02/2025" },
  { code: "VA7585995", date: "10/09/2024" },
]);

const goType = () => {
  uni.navigateTo({ url: '/pages/record/record-type' });
};
</script>

<style lang="scss">
.record-detail-page {
  min-height: 100vh;
  background: linear-gradient(180deg, #87ceeb 0%, #e9f9ed 100%);
}
.form-scroll {
  margin-top: 60px;
  padding: 0 16px 84px 16px;
  box-sizing: border-box;
}
.back-row {
  margin: 12px 0 0 -8px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.back-arrow-icon {
  width: 24px;
  height: 24px;
}
.title-wrap {
  margin: 0 0 8px 0;
}
.page-title {
  font-size: 22px;
  font-weight: 800;
  color: #0b1e2a;
}

.search-box {
  height: 44px;
  background: #fff;
  border-radius: 24px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  justify-content: center;
  margin-top: 16px;
}
.search-icon {
  width: 16px;
  height: 16px;
  margin-right: 6px;
}
.search-input {
  flex: 1;
  text-align: left;
  font-size: 14px;
  color: #333;
}

.tabs {
  display: flex;
  gap: 8px;
  margin: 32px 0 0;
}
.tab {
  padding: 6px 10px;
  background: #e6f0f5;
  color: #23323a;
  border-radius: 8px;
  font-weight: 800;
  font-size: 12px;
}
.tab.active {
  background: #23323a;
  color: #fff;
}

.dir-item {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border-radius: 10px;
  padding: 12px;
  margin-top: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.dir-icon {
  width: 20px;
  height: 20px;
}
.dir-name {
  flex: 1;
  color: #0b1e2a;
}
.dir-date {
  color: #0b1e2a;
  font-size: 12px;
}
</style>
